<template>
<<<<<<< HEAD
  <div>
    <Title :title="title"></Title>
    <!-- 模版引用 -->
    <div ref="left1" style="height:200px"></div>
  </div>
</template>
<script setup>
// 引入折线图构造函数
import { Line } from '@antv/g2plot';
import Title from './Title.vue';
import moment from 'moment'
import { ref, onMounted } from 'vue';

import { get } from '@/utils/request';
const title = ref('实时温度曲线');
// 声明模版引用
const left1 = ref(null);
const TempData = ref([]);
//声明加载图表函数
const loadLine = () => {

  const line = new Line(left1.value, {
    data: TempData.value,
    xField: 'insert_time',
    yField: 'temperature',
    label: {
      style: {
        fill: 'white'
      }
    },

    xAxis: {
      label: {
        rotate: -45,
        style: {
          fill: 'white'
        }
      }
    },
    yAxis: {
      label: {
        rotate: -45,
        style: {
          fill: 'white'
        }
      }
    },
    animation: {
      appear: {
        animation: 'wave-in',
        duration: 5000,
      },
    },
    smooth: true,
    tooltip: {
      domStyles: {
        "g2-tooltip": {
          background: '#147',
          fontSize: '16px',
          color: 'white',
        }
      }
    },
    point: {
      size: 5,
      shape: 'diamond',
      style: {
        fill: 'white',
        stroke: '#5B8FF9',
        lineWidth: 2,
      },
    },
    // tooltip: { showMarkers: false },
    state: {
      active: {
        style: {
          shadowBlur: 4,
          stroke: '#000',
          fill: 'red',
        },
      },
    },
    interactions: [{ type: 'marker-active' }],
  });

  line.render();
}
//
const getData = async () => {
  let res = await get('/dashboard/pageQueryData', { page: 1, pageSize: 500 });
  console.log(res, '查看请求结果')
  res.data.list.forEach((item, index, arr) => {
    arr[0].temperature = 15.4;
    item.insert_time = moment(item.insert_time).format('HH:mm');

  })
  let temp = [];
  res.data.list.forEach((item, index, arr) => {
    if (index % 100 == 0) {
      temp.push(arr[index])
    }
  });
  TempData.value = temp;

}
onMounted(async () => {
  await getData();
  loadLine();
})
=======
    <div>
        <!-- 使用组件 -->
        <Title :title="title"></Title>
        <!-- 模板引用 -->
        <div ref="left1" style="height:150px"></div>

    </div>
</template>
<script setup>
// 引入组件
// 引入折线图构造函数
import { Line } from '@antv/g2plot';
import Title from './Title.vue';
import moment from 'moment';
import { ref, onMounted } from 'vue';
// 引入get请求
import { get } from '@/utils/request'

// 声明标题
const title = ref('实时温度曲线');
// 声明模板引用
const left1 = ref(null);
// 声明一个数组存放后端获取数据 
const TempData = ref([]);
// 声明加载图表函数 
const loadLine = () => {
    // const data = [
    //     { year: '1991', value: 3 },
    //     { year: '1992', value: 4 },
    //     { year: '1993', value: 3.5 },
    //     { year: '1994', value: 5 },
    //     { year: '1995', value: 4.9 },
    //     { year: '1996', value: 6 },
    //     { year: '1997', value: 7 },
    //     { year: '1998', value: 9 },
    //     { year: '1999', value: 13 },
    // ];

    const line = new Line(left1.value, {
        data: TempData.value,
        xField: 'insert_time',
        yField: 'temperature',
        label: {
            style: {
                fill: 'white'
            }
        },
        // 配置x轴文本字段
        xAxis: {
            label: {
                rotate: -45,
                style: {
                    fill: "white"
                }
            }
        },
        // 配置y轴字段文本
        yAxis: {
            label: {
                style: {
                    fill: "white"
                }
            }
        },
        // 折线图表动画
        animation: {
            appear: {
                // 单折线动画
                animation: 'wave-in',
                duration: 5000,
            },
        },
        // 曲线是否平滑
        smooth: true,
        // 设置背景提示框
        tooltip: {
            domStyles: {
                "g2-tooltip": {
                    background: '#147',
                    fontSize: '16px',
                    color: 'white'
                }
            }
        },
        point: {
            size: 5,
            shape: 'diamond',
            style: {
                fill: 'white',
                stroke: '#5B8FF9',
                lineWidth: 2,
            },
        },
        // tooltip: { showMarkers: false },
        state: {
            active: {
                style: {
                    shadowBlur: 4,
                    stroke: '#000',
                    fill: 'red',
                },
            },
        },
        interactions: [{ type: 'marker-active' }],
    });

    line.render();
}
// 封装查询数据方法 
const getData = async () => {
    let res = await get('/dashboard/pageQueryData', { page: 1, pageSize: 1000 });
    console.log(res, '查看请求结果');
    res.data.list.forEach((item, index, arr) => {
        // y轴刻度如果混乱 将第一条数据更改为小一点值
        arr[0].temperature = 15.4;
        item.insert_time = moment(item.insert_time).format('HH:mm');
    });
    // 重新处理数据 将处理好的数据给到temp
    let temp = [];
    res.data.list.forEach((item, index, arr) => {
        // 每隔100条采集一条 
        if (index % 100 == 0) {
            temp.push(arr[index])
        }
    });
    TempData.value = temp;
}
onMounted(async () => {
    await getData();
    // 加载图表
    loadLine();
});
>>>>>>> 1710512daa66ff8561fed39cf79c33e401758b5e
</script>
<style lang="less" scoped></style>